<template>
  <div class="app-container">
    <el-upload
      class="upload-demo"
      style="float: left"
      :action="imgAction"
      :on-change="handleChange"
      :file-list="fileList"
    >
      <el-button type="primary" icon="el-icon-plus" round> 部署流程</el-button>
    </el-upload>

    <el-button
      type="warning"
      icon="el-icon-picture-outline"
      style="margin-left: 10px"
      @click="show_proc"
      round
      >流程图</el-button
    >

    <el-button
      type="danger"
      icon="el-icon-s-opportunity"
      @click="enableOrsuspended_click"
      round
      >停止&恢复</el-button
    >

 <el-button
      type="danger"
      icon="el-icon-s-opportunity"
      @click="destroyProcDef_click"
      round
      >删除</el-button
    >

    <el-table
      v-loading="listLoading"
      element-loading-text="Loading"
      :data="list"
      @row-click="handleSelectionChange"
      fit
      highlight-current-row
    >
      <!-- <el-table-column prop="id" label="ID"></el-table-column> -->
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="key" label="KEY"></el-table-column>
      <el-table-column prop="version" label="版本"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="已停止">
        <template slot-scope="scope">
          {{ scope.row.isSuspended ? '是' : '否' }}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="resourceName" label="资源名称"></el-table-column> -->
      <!-- <el-table-column align="center" label="流程图" width="95">
        <template slot-scope="scope">
          {{ imageBaseUrl+scope.row.id}}
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { procList, BASEURL, enableOrsuspended ,destroyProcDef} from '@/api/workflow'

@Component({
  name: 'proc-def'
})
export default class extends Vue {
  private list: any = []
  private listLoading = true
  private fileList=[];
  private listQuery = {
    page: 1,
    limit: 20
  }
  private imgAction=BASEURL+'wk-fw/publish';

//部署成功之后回调！
  private uploadFileSuccess(){
    console.log("hello");
     this.getList();
  }
  private handleChange(){
    
    setTimeout(() => {
      this.getList();
      this.fileList=[];
    }, 1000);
  }

  /**
   * 暂停或恢复流程定义
   */
  private async enableOrsuspended_click() {
    if (this.selectRow) {
      this.$confirm('"停止"后将无法开启流程，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const { data } = await enableOrsuspended({ def: this.selectRow.id })
          this.getList()
        })
        .catch(() => {
        })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  private selectRow: any
  handleSelectionChange(val: any) {
    this.selectRow = val
  }

  private destroyProcDef_click(){
        if (this.selectRow) {
      this.$confirm('删除流程定义将删除与该流程有关的所有信息，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const { data } = await destroyProcDef({ def: this.selectRow.id })
          this.getList()
        })
        .catch(() => {
        })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  /**
   * 显示流程图
   */
  show_proc() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/proc-image',
        query: {
          id: this.selectRow.id
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  private imageBaseUrl = BASEURL + '/wk-fw/img/'

  created() {
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    const { data } = await procList(this.listQuery)
    this.list = data
    // Just to simulate the time of the request
    this.listLoading = false
  }
}
</script>
